@extends('linfeng.home.person')
@section('title','充值中心')
@section('first-person')
    <div style="font-size:14px;padding:20px;" class="modal-content">
        <div class="chg-rit" id="charge-area">
        <ul style="padding-left:0;">
            <li class="chg-acc">
                <label class="chg-lab" for="">充值方式:</label>
                <div class="chg-way-sel clearfix" style="height:0px;">
                    <div class="csel alipay" >
                        <label class="left_label">
                            <img id="img_zoom" src="{{url('image/home/zfb.jpg')}}" alt="">
                            <input type="radio"  value="1" class="sport" name="sport">
                        </label>
                        <label class="right_label">
                            <img id="img_zooms" src="{{url('image/home/wx.jpg')}}" alt="">
                            <input type="radio"   value="2" class="sports" name="sport">
                        </label>
                    </div>
                </div>
                <script>
                    $(function(){
                        $('#img_zoom').click(function(){
                            $(this).css('border','3px solid rgb(117,205,255)');
                            $('#img_zooms').css('border','')
                            $('.sports').attr('id','')
                            $('.sport').attr('id','rad')
                        })

                        $('#img_zooms').click(function(){
                            $(this).css('border','3px solid rgb(117,205,255)')
                            $('#img_zoom').css('border','');
                            $('.sport').attr('id','')
                            $('.sports').attr('id','rad')
                        })


                    })
                </script>
            </li>
            <li class="chg-vol" id="chg-vol">
                <label class="chg-lab">充值金额:</label>
                <div class="chg-vol-sel clearfix">
                    <div class="csel">
                        <strong>
                            <b>10</b>元
                        </strong>
                        <span>100书币</span>
                    </div>
                </div>
                <div class="chg-vol-sel clearfix">
                    <div class="csel">
                        <strong>
                            <b>30</b>元
                        </strong>
                        <span>300书币</span>
                    </div>
                </div>
                <div class="chg-vol-sel clearfix">
                    <div class="csel">
                        <strong>
                            <b>50</b>元
                        </strong>
                        <span>500书币</span>
                    </div>
                </div>
                <div class="chg-vol-sel clearfix">
                    <div class="csel">
                        <strong>
                            <b>70</b>元
                        </strong>
                        <span>700书币</span>
                    </div>
                </div>
                <div class="chg-vol-sel clearfix">
                    <div class="csel">
                        <strong>
                            <b>100</b>元
                        </strong>
                        <span>1000书币</span>
                    </div>
                </div>
            </li>

                <p style="position: absolute;left: 332px;top: 221PX;">双击取消选择可自定义金额</p>
            <li class="chg-vol">
                <label class="chg-lab">自定义金额:</label>
                <div class="chg-vol-sel">
                    <input id="diy" style="width:200px;" class="form-control" type="text">
                </div>
            </li>
        </ul>
        <script>
            $(function(){
                $('strong').click(function(){
                    $('strong').css('border','')
                    $('strong').attr('id','')
                    $(this).css('border','3px solid rgb(117,205,255)')
                    $(this).attr('id','sum')
                }).dblclick(function(){
                    $('strong').css('border','')
                    $('strong').attr('id','')
                })
            })

        </script>
        {{--data-toggle="modal" data-target="#modals" --}}
        <div class="chg_btns">
            <input class="btn btn-primary" id="fukuan" type="submit">
            <script>
                $(function(){
                    $('#fukuan').click(function() {
                        $type = $('input[name=sport][id=rad]').val();
                        $sum = $('strong[id=sum] b:nth-child(1)').text()
                        $diy = $('#diy').val();
                        if ($type) {
                            if (!$diy && $sum) {

                                if ($sum) {
                                    $('#fukuan').attr('data-toggle', 'modal').attr('data-target', '#modals')
                                } else {
                                    if ($diy) {
                                        $('#fukuan').attr('data-toggle', 'modal').attr('data-target', '#modals')
                                    } else {
                                        alert('请选择金额,或者自定义金额')
                                    }
                                }
                            } else {
                                alert('请不要即选择金额又使用自定义金额')
                            }
                        }else {
                            alert('请选择付款类型')
                        }

                    })
                })
            </script>
            <!-- Modal -->
            <div class="modal fade" id="modals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" style="z-index:1111;" role="document">
                    <div class="modal-content" style="background-color:#429452;">
                        <div class="modal-header" style="border-bottom:none" >
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4  class="modal-title" id="myModalLabel" style="text-align:center;">付款</h4>

                            <h6 style="text-align:center;">微信安全支付</h6>
                        </div>

                        <div class="modal-body" style="background-color:#fff;width:500px;margin:0 auto;">
                            <h4 style="text-align:center;font-family:STXingkai;">通过下方二维码支付</h4>
                            <p style="text-align:center;">
                                <img src="{{asset('image/home/2weima.jpg')}}" style="width:300px;height:300px;" alt="">
                            </p>
                            <h3 style="text-align:center;">【扫一扫】</h3>
                        </div>
                        <div class="modal-footer" style="border-top:none;text-align:center;">
                            <button style="width:200px;" id="gomoney" type="button" class="btn btn-primary btn-lg">我已付款</button>
                        </div>
                        <meta name="_token" content="{!! csrf_token() !!}"/>
                        <script>
                            $(function(){
                                $type = $('input[name=sport][id=rad]').val();
                                $sum = $('strong[id=sum] b:nth-child(1)').text()
                                $diy = $('#diy').val();
                                $('#gomoney').click(function(){
                                    $.ajax({
                                        url:"{{url('home/Person/money')}}",
                                        data:'type='+$type+'&sum='+$sum+'&diy='+$diy,
                                        type:'post',
                                        success:function(data){

                                            if (data==111){
                                                alert('充值成功,后台核实成功后,将在5分钟内冲入您的账户')
                                            }else{
                                                alert('充值失败请联系管理员')
                                            }
                                        },
                                        headers: {
                                            {{--                        'X-CSRF-TOKEN' : '{{ csrf_token() }}',--}}
                                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                                        },
                                        error:function(){

                                        },
                                        datatype:'text'
                                    })
                                })
                            })
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection